<template>
  <div class="app-container">
    <div class="app-container-main">
      <div class="main-card-header">广告位</div>
      <div class="main-card-body">
        <a-alert
          class="alerts"
          message="系统内置广告位不能删除！"
          description="自定义广告位调用名不可以以 “QS_”开头"
          type="warning"
        />

        <div class="table">
          <a-table
            :columns="columns"
            :data-source="data"
            :row-selection="rowSelection"
            :pagination="false"
          >
            <template #status="{ record }">
              <a-tag color="default" v-if="record.status === true"
                >系统内置</a-tag
              >
              <a-tag color="blue" v-else>自定义</a-tag>
            </template>
            <template #action="{ record }">
              <a-button type="primary" @click='edit()'>修改{{record.key}}</a-button>
              <a-button type="" danger @click="deladwei(record.key)">删除</a-button>
            </template>
          </a-table>
        </div>
        <div class="row">
          <div class="row-button">
            <a-button type="primary" @click='add()'>添加广告</a-button>
            <a-button type="primary" danger>删除所选</a-button>
          </div>
          <div class="row-pagination">
            <a-pagination
              v-model:current="current1"
              show-quick-jumper
              :total="1"
              :show-total="(total) => `Total ${total} items`"
              @change="onChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref, reactive } from "vue";
import { HomeOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { delADwei } from '@/api/ad';

import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    HomeOutlined,
  },
  computed: {},
  emits: [],
  props: {},
  setup() {
        // 获取到的路由参数
    const router = useRouter();
    const searchlist = reactive({
      status: "不限平台",
      reg_time: "不限广告位",
      reg_time_day: "不限显示状态",
      reg_time_source: "不限到期时间",
    });

    const current1 = ref(2);

    const onChange = (number) => {
      console.log("Page: ", pageNumber);
    };

    const rowSelection = ref({
      checkStrictly: false,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      },
    });

    const add=()=>{
      console.log("1234")
      router.push('/content/advertising_place/add')
    }
    const edit=()=>{
      console.log("1234")
      router.push('/content/advertising_place/edit')
    }
    const deladwei=(id)=>{
      console.log(id)
      // delADwei()
    }


    const handleSearchChange = () => {};


    onMounted(() => {});
    const columns = [
      {
        title: "广告位名称",
        width: "270px",
        dataIndex: "title",
        key: "title",
      },
      {
        title: " 调用名称",
        dataIndex: "diaoname",
        key: "diaoname",
      },
      {
        title: "建议尺寸",
        dataIndex: "size",
        // width: "130px",
        key: "size",
      },
      {
        title: "广告数量",
        dataIndex: "num",
        key: "num",
        width: 200,
      },
      {
        title: "类型",
        dataIndex: "type",
        key: "type",
        fixed: "center",
        slots: { customRender: "status" },
      },
      {
        title: "操作",
        key: "action",
        // fixed: 'right',
        width: 200,
        slots: { customRender: "action" },
      },
    ];
    const data = [
      {
        key: "1",
        title: "[触屏端]头部轮播",
        size: "750*240",
        diaoname: "QS_top_slide@mobile ",
        num: "6",
        type: 0,
        status: true,
      },
      {
        key: "2",
        title: "[触屏端]首页A区",
        size: "240*240",
        diaoname: "QS_top_slide@mobile2 ",
        num: "3",
        type: 0,
        status: true,
      },
      {
        key: "3",
        title: "[触屏端]底部栏",
        size: "1200*300",
        diaoname: "ZZ_top_slide@mobile ",
        num: "2",
        type: 1,
        status: false,
      },
    ];
    return {
      searchlist,
      data,
      columns,
      current1,
      add,
      edit,
      onChange,
      handleSearchChange,
      rowSelection,
      deladwei,
    };
  },
});
</script>

<style lang="scss" scoped>
.alerts {
  color: #e6a23c;
  border-left: 5px solid #f9c77c;
}
.table {
  margin-top: 30px;
}
.ant-alert-message {
  color: #e6a23c !important;
}
</style>

